<template>
  <div class="photoinfo-contain">
    <div v-for="item in imginfoList" :key="item.id">
      <h1 class="title">{{item.title}}</h1>
      <p>
        <span>发表时间:{{item.add_time | timeFormat}}</span>
        <span>点击:{{item.click}}</span>
      </p>
      <hr>
      <!-- 中间图片缩放图 -->
      <div class="thumbs">
        <vue-preview
          :list="imgthumbsList"
          :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
          :previewBoxStyle="{border: '1px solid #eee'}"
          :tapToClose="true"
          @close="closeHandler"
          @destroy="destroyHandler"
        />
      </div>


      <div class="info" v-html="item.content"></div>
    </div>
    	

      <!-- 发表评论 -->
      <comment :id="id"></comment>
  </div>
</template>

<script>
// 引入发表评论的组件
import comment from "../subComponents/comment.vue"
export default {
  data(){
    return{
      id:this.$route.params.id,
      imginfoList:[],
      imgthumbsList:[],
    }
  },
  created(){
    // console.log(this.id)
  },
  created(){
    this.getimginfo();
    this.getthumbs();
  },
  methods:{
    // 获取数据渲染到页面
    getimginfo(){
      this.$http.get("http://www.liulongbin.top:3005/api/getimageinfo/"+this.id).then(result=>{
        if(result.body.status===0){
          this.imginfoList = result.body.message
        }
      })
    },
    // 获取展示图片的缩略图
    getthumbs(){
      this.$http.get("http://www.liulongbin.top:3005/api/getthumimages/"+this.id).then(result=>{
        if(result.body.status===0){
        result.body.message.forEach((item)=>{
            item.w=600;
            item.h=400;
            item.msrc = item.src;
          });
          this.imgthumbsList = result.body.message;  
        }
      })
    },
    // 缩略图打开关闭的函数
     closeHandler() {
      console.log('closeHandler')
    },
    // 完全关闭之后，调用这个函数清理资源
    destroyHandler() {
      console.log('destroyHandler')
    }
  },
  components:{
    comment,
  }
  
}
</script>

<style lang="scss" scoped>
  .photoinfo-contain{
    padding: 5px;
    .title{
      font-size: 16px;
      color: blue;
      font-weight: bold;
      text-align: center;
      padding: 8px 0px;
    }
    p{
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }
    .info{
      font-size: 14px;
      line-height: 32px;
    }

    .thumbs{
      vue-preview{
        margin: 10px;
        box-shadow: 0 0 8px #999;
      }
    }
  }
</style>
